<!-- 文件废弃 -->
<!-- 渲染规则
 checkbox, 如果字段的值是数组，且数组元素是对象，且对象的字段只有一个且key包含_chk，那么就渲染checkbox，否则渲染text
 动态表格, 如果字段的值是数组，且数组元素是对象，且对象的字段有多个，那么就渲染动态表格
 -->
<template>
  <!-- {{ jsonDataField }} -->
  <div>
    <template v-for="(item, index) in formInfo" :key="index">
      <button @click="formInfoClick(item)">{{ item.name }}</button>
    </template>
  </div>
  <div>{{ jsonData }}</div>
  <div class="container">
    <template v-for="(item, index) in jsonDataField" :key="index">
      <template v-if="item.itemType == 'text'">
        <div class="formItem">
          <label :for="item.filedName">{{ item.filedName }}</label>
          <input class="formItemEdit" type="text" :id="item.filedName" v-model="jsonData[item.filedName]" />
        </div>
      </template>
      <template v-else-if="item.itemType == 'select'">
        <div class="formItem">
          <label :for="item.filedName">{{ item.filedName }}</label>
          <select :name="item.filedName" :id="item.filedName" v-model="jsonData[item.filedName]">
            <option v-for="(option, index) in jsonDataBakup[item.filedName]" :key="index" :option="option">
              {{ option }}
            </option>
          </select>
        </div>
      </template>
      <template v-else-if="item.itemType == 'checkbox'">
        <div class="formItem checkboxItem">
          <label :for="item.filedName">{{ item.filedName }}</label>
          <div style="display: inline-flex; width: 100%; justify-content: space-between">
            <template v-for="(option, index) in Object.keys((jsonDataBakup[item.filedName] as Array<IFormData>)[0])"
              :key="index">
              <div v-if="option.indexOf('_chk') > -1">
                <ElCheckbox v-model="((jsonData[item.filedName] as Array<IFormData>)[0][option] as string)"
                  :label="option.replace('_chk', '')" />
              </div>
              <div v-else>
                <div class="flex gap-4 mb-4">
                  <ElText>{{ option }}</ElText>
                  <ElInput v-model="((jsonData[item.filedName] as Array<IFormData>)[0][option] as string)" clearable
                    placeholder="请输入到文本框" />
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { IFormData, IFormInfo } from '../../components/EditForm/commonType'
import formInfo1 from './JsonEditViewData/data1'
import formInfo2 from './JsonEditViewData/data2'
import { computed, ref } from 'vue'

const deepClone = (data: Object) => JSON.parse(JSON.stringify(data))

const formInfo = [formInfo1, formInfo2]

const jsonDataBakup = ref<IFormData>({})
const jsonData = ref<IFormData>({})
jsonData.value = deepClone(formInfo[0].data)
jsonDataBakup.value = deepClone(formInfo[0].data)

const formInfoClick = (info: IFormInfo) => {
  jsonData.value = deepClone(info.data)
  jsonDataBakup.value = deepClone(info.data)
}

// 根据字段字典数据进行渲染
const filedDicts = [
  {
    filedName: '剂量',
    itemType: 'checkbox',
  },
  {
    filedName: '复溶条件',
    itemType: 'checkbox',
  },
  // {
  //   filedName: 'ypxx',
  //   itemType: 'adaptive',
  // },
]

const jsonDataField = computed(() => {
  const fileds = Object.keys(jsonData.value)
  console.log(fileds)

  const newFileds: { filedName: string; itemType: string }[] = []

  // 遍历字段字典，如果字段存在于jsonData中，则使用jsonData中的itemType，否则使用默认值
  fileds.forEach((filed) => {
    const filedDict = filedDicts.find((item) => item.filedName === filed)
    if (filedDict) {
      newFileds.push({
        filedName: filed,
        itemType: filedDict.itemType,
      })
    } else {
      newFileds.push({
        filedName: filed,
        itemType: 'text',
      })
    }
  })

  return newFileds
})
</script>

<style scoped>
input {
  display: inline-block;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
  transition: border 0.3s;
}

input[type='text'] {
  width: 100%;
}

input:focus {
  border: 1px solid rgb(245, 108, 108);
  outline: none;
  /* 移除默认的轮廓 */
}

select {
  display: inline-block;
  width: 100%;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
  transition: border 0.3s;
}

select:focus {
  border: 1px solid rgb(245, 108, 108);
  outline: none;
  /* 移除默认的轮廓 */
}

.container {
  text-align: center;
}

/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width: 768px) {
  .formItem {
    width: 90%;
  }

  .checkboxItem>div {
    flex-direction: column;
    justify-content: normal;
  }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width: 992px) {
  .formItem {
    width: 47%;
  }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
  .formItem {
    width: 47%;
  }
}

.formItem {
  /* display: inline-block; */
  display: inline-flex;
  border: 1px solid rgb(220, 223, 230);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: left;
}

.formItem>label {
  width: 200px;
}

.formItem>.formItemEdit {
  width: 100%;
}
</style>
